<template>
  <div class="register-box" v-if="isFirst">
    <div id="returnLogin"><el-button type="primary" link @click="router.push('/login')">返回登录</el-button></div>
    <el-row>
      <el-col :span="24" > <label style="color: black; font-size: 20px">找回密码</label></el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3"><label>手机号</label></el-col>
      <el-col :span="12" ><el-input v-model="username" type="text" clearable><template #prefix>
        <span class="iconfont icon-shouji"></span>
      </template></el-input></el-col>

    </el-row>
    <el-row>
      <el-col :span="4" :offset="3"><label>验证码</label></el-col>
      <el-col :span="7" ><el-input v-model="mailCode" type="text" clearable>
        <template #prefix>
          <span class="iconfont icon-ziyuan"></span>
        </template></el-input>
      </el-col>
      <el-col :span="5" ><el-button round :disabled="sendDisabled" @click="getCode">{{ sendValue }}</el-button></el-col>
    </el-row>
    <el-row>
      <el-col><el-button type="primary" @click="verify">下一步</el-button></el-col>
    </el-row>
  </div>
  <div class="register-box" v-if="!isFirst">
    <el-row>
      <el-col :span="24" > <label style="color: black; font-size: 20px">重置密码</label></el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3"><label>密码</label></el-col>
      <el-col :span="12" ><el-input v-model="password" type="password" show-password><template #prefix>
        <span class="iconfont icon-mima"></span>
      </template></el-input></el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="3"><label>确认密码</label></el-col>
      <el-col :span="12" ><el-input v-model="ensurepassword" type="password" show-password><template #prefix>
        <span class="iconfont icon-mima"></span>
      </template></el-input></el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-button type="primary" @click="findPassword">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import axios from "axios";
import {ElMessage} from "element-plus";
const mailCode=ref('')
const username=ref('')
const password=ref('')
const ensurepassword=ref('')

const times=ref(60)
const sendValue=ref("发送验证码")
const   sendDisabled=ref(false)
const isFirst=ref(true)
let timer=null
const router=useRouter()
function verify(){//点击下一步，确认验证码
  axios({
    method: 'post',
    url: '/api/login/checkForgetCode',
    data:{
      username: username.value,
      code: mailCode.value,
    }

  }).then((res)=>{
    if(res.data.code==='1'){
      isFirst.value=!isFirst.value

    }else if(res.data.code==='0'){
      ElMessage.error(res.data.message)
    }
  })
}
function getCode(){//获取验证码
  let a=/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
  if(!a.test(username.value)){
    // alert('请输入正确的手机号')
    ElMessage.warning('请输入正确的手机号')
  }else{
    axios({
      method: 'post',
      url: '/api/login/forgetPassCode',
      data: {
        username: username.value,
      },
    }).then((res)=>{
      if(res.data.code==='1'){
        // alert(res.data.message)
        ElMessage.success(res.data.message)
        timer=setInterval(()=>{
          times.value--;
          if(times.value<=0){
            sendValue.value='发送验证码';
            clearInterval(timer);
            times.value=60;
            sendDisabled.value=false;
          }else{
            sendValue.value=times.value+'秒后重试';
            sendDisabled.value=true;
          }
        },1000)
      }else if(res.data.code==='0'){
        // alert(res.data.message)
        ElMessage.error(res.data.message)
      }
    })
  }
}
function findPassword(){
  if(ensurepassword.value===password.value){
    if(password.value.length<6){
      // alert('密码长度不能小于6位')
      ElMessage.warning('密码长度不能小于6位')
    }else {
      axios({
        method: 'post',
        url: '/api/login/changeForgetPassword',
        data: {
          username: username.value,
          password: password.value
        },
      }).then((res)=>{
        if(res.data.code==='1'){
          ElMessage.success(res.data.message)
          router.push('/login')
        }else if(res.data.code==='0'){
          ElMessage.error(res.data.message)
        }
      })
    }
  }else{
    // alert('两次输入密码不相同')
    ElMessage.warning('两次输入密码不相同')
  }
}
</script>

<style scoped>
.register-box{
  width: 450px;
  height: 240px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid black;
  opacity: 0.85;
  filter: alpha(opacity=90);
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  padding-top: 2%;
  box-shadow: 2px 2px 10px rgba(140, 147, 157, 0.69);
}
.el-row{
  margin-bottom: 20px;
}
.el-row:last-child{
  margin-top: 30px;
}
#returnLogin{
  position: absolute;
  top: 2%;
  right: 2%;
}
</style>